<template>
  <div class="help">

    <el-row style="padding-top: 20px">
      <el-col :offset="1" :span="3" style="font-size:24px;color: #e14c05">
        温馨提示：
      </el-col>
      <el-col :span="8">
        <span style="color: #e14c05">
          第一次绑定，需要5-10分钟爬取~<br>
          重复绑定会删除上一个账号的记录~
        </span>
      </el-col>
      <el-col :span="12">
        <el-button type="success" round icon="el-icon-info" @click="dialogTableVisible = true">查看自己OJ的ID</el-button>
        <el-dialog width="80%" :visible.sync="dialogTableVisible">
          <span slot="title" style="font-size: 30px"> 请选择查看的OJ</span>
          <el-tabs v-model="activeName" style="font-size: 26px">
            <el-tab-pane v-for="(item, index) in Oj" :key="index" :name="item.name">
              <span slot="label" style="font-size: 22px; margin: 0 20px">{{ item.name }}</span>
              <a :href="item.link" target="_blank">去查看自己的ID</a>
              <el-image
                style="width: 100%; height: 100%"
                :src="item.imgSrc"
                :preview-src-list="[item.imgSrc]"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </el-tab-pane>
          </el-tabs>
        </el-dialog>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'BindOjHelp',
  data() {
    return {
      dialogTableVisible: false,
      Oj: [
        { name: 'NowCoder', imgSrc: require('@/assets/OjHelp/NowCoderHelp.png'), link: 'https://ac.nowcoder.com/acm/contest/vip-index' },
        { name: 'Luogu', imgSrc: require('@/assets/OjHelp/LuoguHelp.png'), link: 'https://www.luogu.com.cn/' },
        { name: 'HDU', imgSrc: require('@/assets/OjHelp/HduHelp.png'), link: 'http://acm.hdu.edu.cn/status.php' },
        { name: 'Codeforces', imgSrc: require('@/assets/OjHelp/CodeforcesHelp.png'), link: 'https://codeforces.com/' },
        { name: 'LOJ', imgSrc: require('@/assets/OjHelp/LojHelp.png'), link: 'https://loj.ac/u' },
        { name: 'VJudge', imgSrc: require('@/assets/OjHelp/VjudgeHelp.png'), link: 'https://vjudge.net/user' },
        { name: 'Leetcode', imgSrc: require('@/assets/OjHelp/LeetcodeHelp.png'), link: 'https://leetcode-cn.com/' }
      ],
      activeName: 'NowCoder'
    }
  }
}
</script>

<style scoped>
  .help {
    height: 60px;
    text-align: center;
  }

</style>
